<template>
	<div class="haibao">
		<div class="haibao-top">
			<div class="haitetx">
				<h3>{{mpconfig.mp_name}}</h3>
				<p>{{mpconfig.mp_position}}</p>
				<!-- <p>郑州市管城区航海东路启航大厦E座1012</p> -->
			</div>
			<div class="haiimage">
				<view @click="haibao">
					<span>海报</span>
					<image :src="imgHost + '/index/erwm.png'"></image>
				</view>
				<view>
					<image :src="mpconfig.mp_logo" mode=""></image>
				</view>
			</div>
		</div>
		<div class="haibao-bott">
			<view>
				<span>
					<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
					<span>{{mpconfig.mp_phone}}</span>
				</span>
				<span></span>
			</view>
			<view @click="mapOpen">
				<span>
					<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
					<span>{{mpconfig.mp_address}}</span>
				</span>
				<span>
					<image :src="imgHost + '/index/right.png'" mode=""></image>
				</span>
			</view>
			<view>
				<span>
					<image :src="imgHost + '/index/ement.png'" mode=""></image>
					<span>{{mpconfig.mp_email}}</span>
				</span>
				<span>
					<image :src="imgHost + '/index/right.png'" mode=""></image>
				</span>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["imgHost", "imgLogo", "mpconfig"],
		methods: {
			haibao() {
				uni.showToast({
					title: '请先创建名片',
					icon: 'none'
				})
			},
			// 地图定位
			mapOpen() {
				uni.openLocation({
					latitude: parseFloat(this.mpconfig.lat),
					longitude: parseFloat(this.mpconfig.lng),
					name: this.mpconfig.mp_address,
					success: (e) => {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.haibao {
		height: 464rpx;
		border-radius: 8rpx;
		// background: transparent;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 30rpx;
		margin-top: 5%;
		background-color: rgba(255, 255, 255, 0.97);

		.haibao-top {
			height: 210rpx;
			padding: 48rpx;
			padding-bottom: 0rpx;
			display: flex;
			justify-content: space-between;

			.haiimage {
				view:nth-child(1) {
					text-align: right;

					image {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}

					span {
						margin-right: 6rpx;
						vertical-align: middle;
						font-weight: 500;
						font-size: 30rpx;
						line-height: 40rpx;
						text-align: right;
						color: #595959;
					}
				}

				view:nth-child(2) {
					margin-top: 20rpx;
					width: 144rpx;
					height: 144rpx;
					overflow: hidden;
					border-radius: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.haitetx {
				margin-top: 20rpx;

				h3 {
					font-weight: 600;
					font-size: 42rpx;
					line-height: 80rpx;
					text-align: left;
					color: #161616;
				}

				p {
					font-weight: 600;
					font-size: 22rpx;
					line-height: 40rpx;
					text-align: left;
					color: #a0a0a0;
				}
			}
		}

		.haibao-bott {
			padding: 48rpx;
			padding-top: 30rpx;

			view:nth-child(3) {
				span:nth-child(1) {
					image {
						width: 24rpx;
						height: 16rpx;
					}
				}
			}

			button {
				margin-right: 10rpx;
				width: 35rpx;

				image {
					width: 24rpx;
					height: 26rpx;
				}
			}

			view {
				display: flex;
				justify-content: space-between;

				// align-items: center;
				// vertical-align: middle;
				.onetext {
					span {
						margin-top: 10rpx;

						image {
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							text-align: left;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: left;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				span {
					margin-top: 10rpx;

					image {
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: left;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				span {
					font-weight: 600;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: left;
					color: #595959;
					vertical-align: middle;
					margin-left: 14rpx;
				}
			}
		}
	}
</style>